<template>
  <div class="detail">
    <!-- detail的navbar-->
    <DetailNavbar class="detail_navbar" @detail_top_click="d_top_click" ref="d_navbar"></DetailNavbar>
    <div class="nav_bottom"></div>
    <!-- <DetailSwiper :topImages="topImages"></DetailSwiper>
    <DetailItemInfo :itemInfo="itemInfo"></DetailItemInfo>
    <DetailShop :shopInfo="shopInfo"></DetailShop>
    <DetailParams :detailInfo="detailInfo"></DetailParams> -->
    
    <Scroll 
      class="detail_wrapper" 
      ref="deatil_scroll" 
      :probetype="3">
      <div class="detail_content">
        <DetailSwiper :topImages="topImages"></DetailSwiper>
        <DetailItemInfo :itemInfo="itemInfo"></DetailItemInfo>
        <DetailShop :shopInfo="shopInfo"></DetailShop>
        <DetailParams :detailInfo="detailInfo" ref="d_params"></DetailParams>
        <DetailComment :detailComment="detailComment" ref="d_comment"></DetailComment>
        <DetailRecommend :recommendList="recommendList" ref="d_recommend"></DetailRecommend>
      </div>
    </Scroll>

    <Backtop @click.native="d_backtop" v-show="isbacktopShow"></Backtop>

    <div class="mytest">
      <DetailBottomBar @addToCart="addToCart"></DetailBottomBar>
    </div>
    
  </div>
</template>

<script>
import DetailNavbar from "views/detail/detailComps/DetailNavbar";
import DetailSwiper from "./detailComps/DetailSwiper";
import DetailItemInfo from "./detailComps/DetailItemInfo";
import DetailShop from "./detailComps/DetailShop";
import DetailParams from "./detailComps/DetailParams";
import DetailComment from "./detailComps/DetailComment";
import DetailRecommend from "./detailComps/DetailRecommend";

import Scroll from "components/common/scroll/Scroll";
import Backtop from "components/content/backtop/Backtop";
import DetailBottomBar from "./detailComps/DetailBottomBar"

import {getdetailData,getRecommendData} from "network/detail";
import {itemInfo,shopInfo,detailInfo, detailComment} from "./detail_utils";

export default {
  name: "Detail",
  data(){
    return {
      totalData: null,
      itemInfo: {},
      topImages:[],
      shopInfo: {},
      detailInfo:{},
      detail_scroll: null,
      isbacktopShow: false,
      detailComment: {},
      recommendList: [],
      params_offset: 0,
      comment_offset: 0,
      recommend_offset: 0,
      product: {},
    }
  },
  components: {
    DetailNavbar,
    DetailSwiper,
    DetailItemInfo,
    DetailShop,
    DetailParams,
    Scroll,
    Backtop,
    DetailBottomBar,
    DetailComment,
    DetailRecommend
  },
  mounted(){
    this.detail_scroll = this.$refs.deatil_scroll.scroll;

    this.$bus.$on("detailSImgLoad",()=>{
      this.detail_scroll.refresh();
      // console.log("test");
    })
    this.$bus.$on("bottom_detail_imgload",()=>{
      this.detail_scroll.refresh();
      setTimeout(()=>{
        this.params_offset = this.$refs.d_params?this.$refs.d_params.$el.offsetTop:0;
        this.comment_offset = this.$refs.d_comment?this.$refs.d_comment.$el.offsetTop:0;
        this.recommend_offset = this.$refs.d_recommend?this.$refs.d_recommend.$el.offsetTop:0;
      },0)
      // console.log(this.params_offset);
      // console.log(this.comment_offset);
      // console.log(this.recommend_offset);

      // console.log("test");
    })

    this.$bus.$on("detailRImgLoad",()=>{
      this.detail_scroll.refresh();
      
      // console.log("test");
    })

    this.detail_scroll.on("scroll",(position)=>{
      this.isbacktopShow = (-position.y) > 1000;
      // this.params_offset = this.$refs.d_params?this.$refs.d_params.$el.offsetTop:0;
      // this.comment_offset = this.$refs.d_comment?this.$refs.d_comment.$el.offsetTop:0;
      // this.recommend_offset = this.$refs.d_recommend?this.$refs.d_recommend.$el.offsetTop:0;
      if(-position.y+44 < this.params_offset){
        this.$refs.d_navbar?this.$refs.d_navbar.currentIndex = 0:null;
        // console.log("0");
      }else if(-position.y+44 >= this.params_offset && -position.y+44 < this.comment_offset){
        this.$refs.d_navbar?this.$refs.d_navbar.currentIndex = 1:null;
        // console.log("1");
      }else if(-position.y+44>= this.comment_offset && -position.y+44 < this.recommend_offset){
        this.$refs.d_navbar?this.$refs.d_navbar.currentIndex = 2:null;
        // console.log("2");
      }else{
        this.$refs.d_navbar?this.$refs.d_navbar.currentIndex = 3:null;
        // console.log("3");
      }
    })
  },
  methods: {
    d_backtop(){
      this.detail_scroll.scrollTo(0,0,500);
    },
    d_top_click(index){
      switch (index){
        case 0:
          this.detail_scroll.scrollTo(0,0,200);
          break;
        case 1:
          this.detail_scroll.scrollTo(0,-this.params_offset+44,500);
          break;
        case 2:
          this.detail_scroll.scrollTo(0,-this.comment_offset+44,500);
          break;
        case 3:
          this.detail_scroll.scrollTo(0,-this.recommend_offset+44,500);
          break;
      }
    },
    addToCart(){
      this.$store.dispatch("addcart",this.product);
    }
  },
  created(){
    getdetailData(this.$route.params.iid).then(res=>{
      this.totalData = res.result;
      // 获取图片
      this.topImages = this.totalData.itemInfo.topImages;
      // 获取头部描述信息
      this.itemInfo = new itemInfo(this.totalData.itemInfo,this.totalData.columns);
      //获取商家信息
      this.shopInfo = new shopInfo(this.totalData.shopInfo);
      //获取商品细节信息
      this.detailInfo = new detailInfo(this.totalData.detailInfo,this.totalData.itemParams);
      //获取tables
      this.detailInfo.tables = this.detailInfo.rule.tables[0];
      this.detailInfo.rule_set = this.detailInfo.paramsInfo.set;
      //获取评论信息
      this.detailComment = new detailComment(this.totalData.rate.list[0]);

      this.product.topImages = this.topImages[0];
      this.product.title = this.totalData.itemInfo.title;
      this.product.price = this.totalData.itemInfo.lowNowPrice;
      this.product.desc = this.totalData.itemInfo.desc;
      this.product.iid = this.$route.params.iid;
      // console.log(this.totalData);
      // console.log(this.detailComment);
      // console.log(this.product);
      // console.log(this.detailInfo.rule.tables);
    }).catch(err=>{
      console.log(err);
    });

    getRecommendData().then(res=>{
      // console.log(res);
      this.recommendList = res.data.list;
      // console.log(this.recommendList);
    }).catch(err=>{
      console.log(err);
    })
  }
}
</script>

<style scoped>

  .detail{
    position: relative;
    z-index:40;
    background-color: #fff;
  }
  .detail_navbar{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 50;
  }
  .nav_bottom{
    width: 100%;
    height: 44px;
  }

  .detail_wrapper{
    width: 100%;
    overflow: hidden;
    height: calc(100vh - 93px);   
  }

  .mytest{
    height: 49px;
    width: 100%;
    border-top: 2px solid #f6f6f6;
  }
</style>